<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="jquery.js"></script>
    <script src="lodash.js"></script>
</head>
<body>
    <div id="maincontainer">
        <div id="ClickTest"><a href="javascript:;"> <h1>Click To Start Testing.</h1></a></div>

        <p> Find link group</p>
        <div>
            <ul id="ullink">
                <li><a href="javascript:;" id="linkgroupli">link one</a></li>
                <li>
                    <a href="javascript:;">link two</a>
                    <ul>
                        <li><a href="javascript:;">sub sub</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <p> Find ordered link group</p>
        <div>
            <ul>
                <li><a href="javascript:;">link one</a></li> 
                <li><a href="javascript:;" id="orderedlinkgroup">link two</a></li> 
                <li><a href="javascript:;">link three</a></li> 
            </ul>
        </div>

        <p>nearby position</p>
        <div>
            <div id="positionone">position one</div><div id="positiontwo">position two</div><div id="positionthree">position three</div>
        </div>

        <ul>
            <li id="positionli">
                <a href="javascript:;" id="positiona">aaa</a>
                <ul>
                    <li>
                        <a href="javascript:;" id="positionsubone">sub one</a>
                        <ul>
                            <li>
                                <a href="javascript:;">sub2 one</a>
                            </li>
                            <li><a href="javascript:;">sub2 two</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;">sub two</a></li>
                </ul>
            </li>

            <li><a href="javascript:;">bbb</a></li>
            <li><a href="javascript:;">ccc</a></li>
        </ul>


        <p>upgrade container</p>
        <div>
            <div><p><a href="#" id="upgrade">link</a></p></div>
            <div><p><a href="#" id="noupgrade">link</a><a href="#">link</a></p></div>

        </div>


        <p>Get Elements In Between</p>
        <div>
            <div id="betweencontainer">
                <div><a href="#" id="betweenone">linkone</a></div>
                <div class="submen">
                    <div><a href="#">sublink</a></div>
                </div>
                <div><a href="#" id="betweentwo">linktwo</a></div>
                <div class="submen">
                    <div><a href="#">otherlink</a></div>
                </div>
            </div>
        </div>


        <p>Get client rect</p>
        <div>
            <p id="clientrectone"><span id="cleintRectSubOne">text</span> between <span id="cleintRectSubTwo">text</span></p>
            <p id="clientrecttwo"><span id="cleintRectDownOne">text</span> between <span id="cleintRectDownTwo">text</span></p>
        </div>

        <p>Get Find Elements By Id And Class</p>
        <div id="GetElementHasId" class="one two"><p>text</p></div>


        <p>Test whitespace</p>
        <div id="WhiteSpaceYes" class="one two">


        </div>

        <div id="WhiteSpaceNo" class="one two">

            a
        </div>


        <p>Test position alig</p>

        <ul id="positionalign">
            <li>text one</li>
            <li>text two</li>
            <li>text three</li>
        </ul>

        <div id="WhiteSpaceNo" class="one two">
            <p>some more text here<span id="notinposition">text</span></p>
        </div>

        <p>Test walk path</p>
        <div id="walkpath" class="one two">
            <div></div>
            <div>
                <p>some more text here<span id="walkpathspan">text</span></p>
            </div>
            <div>
                <h5>title</h5>
            </div>
            <kooboo>kkkk</kooboo>
            <div><h5>backtitle</h5></div>
        </div>

        <p>Remove Kooboo Attribute</p>
        <div id="removekoobooattribute">
            <a data-kb-fe-id="73"><img src="" kooboo-id="aa" data-kb-fe-id="74" /></a>
        </div>


        <p>Test elements position</p>
        <div>
            <div>
                <div><a href="#" id="position1">linkone</a></div>
                <div class="submen">
                    <div><a href="#">sublink</a></div>
                </div>
                <div><a href="#">linktwo</a></div>
                <div class="submen" id="position2">
                    <div><a href="#" id="position3">otherlink</a></div>
                </div>
            </div>
        </div>
         
        <p>Test elements Get attributes</p>
        <div>
            <div> 
                <a href="/aaa" subitem="aaa" id="abcde">attributes</a>
            </div>
        </div>
         

        <p>Test Tree Distance</p>
        <div>
            <div>
               <p><a href="one" id="aone">a one</a>
                   <a href="one" id="atwo">a one</a></p>
                <p>
                    <a href="one" id="paone">a one</a> 
                </p>
            </div>
            <div><p id="pdistance"></p></div>
        </div>


        <p>Test Remove Kooboo Attribute;</p>
        <div id="withkooboo">
            <div kooboo-id="123" kb-data-xxx="455" id="withkooboosub">
                <p kooboo-id="123" >
                    <a kooboo-id="123"  href="one" id="withkooboosubsub">a one</a>
                    <a kooboo-id="123"  href="one">a one</a>
                </p>
            </div>
        </div>


        <p>contains current url;</p>
        <div id="containurldiv">
            <a href="/domService.html" id="containurla"> current</a>
            <a href="/anotherone"> others</a>
        </div>    
        <div id="nocontainurldiv">
            <a href="/AdvancedMenuTest.html"> no</a>
            <a href="/anotherone">no others</a>
        </div>   
         
        <p>Get active class.;</p>
        <div id="activeclassdiv">
            <a href="/domService.html" class="active"> current</a>
            <a href="/anotherone"> others</a> 
        </div>
  
        <div id="activeclassdiv2">
            <a href="/domService.html" class="item active"> current</a>
            <a href="/anotherone" class="item"> others</a>
            <a href="/anothertww" class="item"> others tt</a>
        </div>
    </div>
</body>
<script src="js/require.js" data-main="DomServiceUnitTest.js"></script> 
</html>
